<template>
  <div class="container">
    <div class="subtitle">
      <p>
        <span class="title-point"></span>
        考勤记录
      </p>
      <div class="title-extra">
        <img src="../assets/image/blue-stack.png" alt />
      </div>
    </div>
    <div class="content">
      <div class="left" id="left-chart"></div>
      <div class="right">
        <table>
          <tr class="headline">
            <th>名称</th>
            <th>比率</th>
          </tr>
          <tr v-for="(item,index) in items" :key="index" class="content-line">
            <td>{{item.name}}</td>
            <td>{{item.condition}}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "check",
  data() {
    return {
      items: [
        { name: "按时比率", condition: "96%" },
        { name: "迟到比率", condition: "2.8%" },
        { name: "未到比率", condition: "1%" }
      ]
    };
  },
  mounted() {
    this.initChart();
  },
  props: ["userId"],
  methods: {
    initChart() {
      let myChart = this.$echarts.init(document.getElementById("left-chart"));
      let option = {};
      option = {
        title: [
          {
            text: "应到人数",
            textStyle: {
              color: "white",
              fontSize: "12"
            },
            top: "110",
            left: "20"
          },
          {
            text: "已到人数",
            textStyle: {
              color: "white",
              fontSize: "12"
            },
            top: "110",
            left: "130"
          },
          {
            text: "迟到人数",
            textStyle: {
              color: "white",
              fontSize: "12"
            },
            top: "110",
            left: "240"
          },
          {
            text: "出勤率",
            textStyle: {
              color: "white",
              fontSize: "12"
            },
            top: "110",
            left: "360"
          }
        ],
        series: [
          {
            center: ["10%", "35%"],
            radius: ["49%", "50%"],
            clockWise: false,
            hoverAnimation: false,
            type: "pie",
            data: [
              {
                name: "",
                value: 0,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    },
                    color: "#5886f0",
                    borderColor: "#5886f0",
                    borderWidth: 0,
                    borderType: "dotted"
                  },
                  emphasis: {
                    color: "#5886f0",
                    borderColor: "#5886f0",
                    borderWidth: 0
                  }
                }
              },
              {
                value: 637,
                name: "应到人数",
                label: {
                  show: true,
                  textStyle: {
                    fontSize: 14,
                    fontWeight: "bold",
                    color: "white"
                  },
                  formatter: "{c}",
                  position: "center"
                },
                itemStyle: {
                  normal: {
                    labelLine: {
                      show: false
                    },
                    color: new this.$echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: "#5F51F5"
                        },
                        {
                          offset: 1,
                          color: "#00E9FF"
                        }
                      ]
                    ),
                    borderColor: new this.$echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: "#5F51F5"
                        },
                        {
                          offset: 1,
                          color: "#00E9FF"
                        }
                      ]
                    ),
                    borderWidth: 8
                  }
                }
              }
            ]
          },
          {
            center: ["35.0%", "35%"],
            radius: ["49%", "50%"],
            clockWise: false,
            hoverAnimation: false,
            type: "pie",
            data: [
              {
                name: " ",
                value: 2,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    },
                    color: "#5886f0",
                    borderColor: "#5886f0",
                    borderWidth: 0,
                    borderType: "dotted"
                  },
                  emphasis: {
                    color: "#5886f0",
                    borderColor: "#5886f0",
                    borderWidth: 0
                  }
                }
              },
              {
                value: 611,
                name: "已到人数",
                label: {
                  show: true,
                  textStyle: {
                    fontSize: 14,
                    fontWeight: "bold",
                    color: "white"
                  },
                  formatter: "{c}",
                  position: "center"
                },
                itemStyle: {
                  normal: {
                    labelLine: {
                      show: false
                    },
                    color: new this.$echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: "#00E9FF"
                        },
                        {
                          offset: 1,
                          color: "#5F51F5"
                        }
                      ]
                    ),
                    borderColor: new this.$echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: "#5F51F5"
                        },
                        {
                          offset: 1,
                          color: "#00E9FF"
                        }
                      ]
                    ),
                    borderWidth: 8
                  }
                }
              }
            ]
          },
          {
            center: ["60.0%", "35%"],
            radius: ["49%", "50%"],
            clockWise: false,
            hoverAnimation: false,
            type: "pie",
            data: [
              {
                name: "",
                value: 126,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    },
                    color: "#5886f0",
                    borderColor: "#5886f0",
                    borderWidth: 0,
                    borderType: "dotted"
                  },
                  emphasis: {
                    color: "#5886f0",
                    borderColor: "#5886f0",
                    borderWidth: 0
                  }
                }
              },
              {
                value: 18,
                name: "迟到人数",
                label: {
                  show: true,
                  textStyle: {
                    fontSize: 14,
                    fontWeight: "bold",
                    color: "white"
                  },
                  formatter: "{c}",
                  position: "center"
                },
                itemStyle: {
                  normal: {
                    labelLine: {
                      show: false
                    },
                    color: new this.$echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: "#00E9FF"
                        },
                        {
                          offset: 1,
                          color: "#5F51F5"
                        }
                      ]
                    ),
                    borderColor: new this.$echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: "#5F51F5"
                        },
                        {
                          offset: 1,
                          color: "#00E9FF"
                        }
                      ]
                    ),
                    borderWidth: 8
                  }
                }
              }
            ]
          },
          {
            center: ["85.0%", "35%"],
            radius: ["49%", "50%"],
            clockWise: false,
            hoverAnimation: false,
            type: "pie",
            data: [
              {
                name: "",
                value: 1,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    },
                    color: "#5886f0",
                    borderColor: "#5886f0",
                    borderWidth: 0,
                    borderType: "dotted"
                  },
                  emphasis: {
                    color: "#5886f0",
                    borderColor: "#5886f0",
                    borderWidth: 0
                  }
                }
              },
              {
                value: 99,
                name: "出勤率",
                label: {
                  show: true,
                  textStyle: {
                    fontSize: 14,
                    fontWeight: "bold",
                    color: "white"
                  },
                  formatter: "{c}",
                  position: "center"
                },
                itemStyle: {
                  normal: {
                    labelLine: {
                      show: false
                    },
                    color: new this.$echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: "#00E9FF"
                        },
                        {
                          offset: 1,
                          color: "#5F51F5"
                        }
                      ]
                    ),
                    borderColor: new this.$echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: "#FDEF21"
                        },
                        {
                          offset: 1,
                          color: "#FA8F20"
                        }
                      ]
                    ),
                    borderWidth: 8
                  }
                }
              }
            ]
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>

<style scoped lang="scss">
.container {
  width: 691px;
  height: 208px;
  background: url("../assets/image/bottom3.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 10px;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.content {
  display: flex;
}

.left {
  width: 450px;
  height: 160px;
}

.right {
  width: 170px;
  height: 140px;
}
.headline {
  height: 29px;
  background: linear-gradient(
    rgba(105, 197, 255, 0.2) 0%,
    rgba(56, 147, 255, 0.2) 100%
  );

  color: #78daef;
}
.content-line {
  & > td {
    padding: 4px 0;
    color: rgba(158, 181, 210, 1);
    text-align: center;
  }
}
</style>
